<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick, computed } from 'vue';
const props: any = defineProps<{
    ujt: any;
}>();
const { $global } = props.ujt;
$global.scale = 1;

const containerRef: any = ref(null);
let resizeTimer: any = null;

const calcScale = () => {
    const ratio = Math.min(
        window.innerWidth / ($global.sys?.zoomwidth || 1920),
        window.innerHeight / ($global.sys?.zoomheight || 1080)
    );
    $global.scale = ratio.toFixed(2);
};

const handleResize = () => {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(() => {
        requestAnimationFrame(calcScale);
    }, 150);
};
const cmScaleStyle: any = computed(() => {
    return {
        width: $global.sys?.zoomwidth ? $global.sys.zoomwidth + 'px' : '1920px',
        height: $global.sys?.zoomheight
            ? $global.sys.zoomheight + 'px'
            : '1080px',
        transform: `scale(${$global.scale}) translate(-50%,-50%)`,
    };
});

onMounted(() => {
    nextTick(calcScale);
    window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
    window.removeEventListener('resize', handleResize);
    clearTimeout(resizeTimer);
});
</script>

<template>
    <div
        ref="containerRef"
        class="scale-wrapper"
        id="asaizoomarea"
        :style="cmScaleStyle"
    >
        <slot></slot>
    </div>
</template>

<style scoped lang="scss">
.scale-wrapper {
    position: fixed;
    left: 50%;
    top: 50%;
    transform-origin: 0 0;
    will-change: transform;
    transition: transform 0.3s ease;
}
</style>
